<template>
	<view class="cate">
		<scroll-view class="cate-list">
			<view class="item" :class="{active:item.id==selectId}" v-for="(item,index) in cateOneList"
				@tap="changeSelect(item.id)">
				{{item.name}}
			</view>
		</scroll-view>
		<!-- <scroll-view class="cate-goods"></scroll-view> -->
		<scroll-view class="cate-goods" scroll-y>
			<view class="item2" v-for="(item,index) in goodsList" :key="index">
				<view class="pic">
					<image :src="item.goods_big_logo" mode=""></image>
				</view>
				<view class="info">
					<view class="name">{{item.name}}
					</view>
					<view class="price">
						￥{{item.price}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	onLoad(() => {
		getCateOneList()
		getgoodsList(0)
	})

	const cateOneList = ref([])
	async function getCateOneList() {
		let res = await uni.$post('/categoryListLevel', {
			"level": 1
		})
		if (res.code == 200) {
			cateOneList.value = res.result
			cateOneList.value.unshift({
				id: 0,
				name: "全部"
			})
		}
		console.log(cateOneList.value)
	}
	const selectId = ref(0)

	function changeSelect(id) {
		selectId.value = id;
		getgoodsList(id)
	}

	const goodsList = ref([])

	/*
	@param {Object}
	*/

	async function getgoodsList(id) {
		if (id == 0) {
			let res = await uni.$post("/goodsListPage", {
				"page": 1,
				"number": 20
			})
			if (res.code == 200) {
				goodsList.value = res.goodsList.map(item => {
					item.goods_big_logo = uni.$base_url + item.goods_big_logo
					return item;
				})
			}
			console.log(goodsList.value)
		} else {
			let res = await uni.$post("/goodsListPage_catTwo", {
				"cat_two_id": id,
				"page": 1,
				"number": 10
			})
			if (res.code == 200) {
				goodsList.value = res.goodsList.map(item => {
					item.goods_big_logo = uni.$base_url + item.goods_big_logo
					return item;
				})
			}
			// console.log(goodsList.value)
		}
	}
</script>

<style>
	.cate {
		display: flex;
	}

	.cate>.cate-list {
		width: 180rpx;
		border: 1px solid red;
		background-color: #efefef;
		height: calc(100vh - 100px);
		/*#ifdef MP-WEIXIN */
		height: 100vh;
		/*#endif*/
	}

	.item {
		font-size: 12px;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
	}

	.active {
		background-color: #ff6700;
		color: #fff;
	}

	.cate-goods {
		width: 570rpx;
		border: 1px solid red;
		height: calc(100vh - 100px);
		/*#ifdef MP-WEIXIN */
		height: 100vh;
		/*#endif */
	}

	.item2 {
		display: flex;
		padding: 10rpx;

	}

	.item2>.pic {
		width: 150rpx;
		height: 150rpx;
	}

	.item2>.pic>image {
		width: 100%;
		height: 100%;
	}

	.item2>.info {
		width: 380rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.item2>.info>.name{
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		color: #666;
		font-size: 14px;
	}
	.item2>.info>.price{
		color: #f00;
	}
</style>